<!DOCTYPE html>
<html lang="en">
<head>
    <script src="${request.contextPath}/js/jquery.js"></script>
    <style>
        #fault_wrapper {
            width:calc(100% - 64px);
            height:100%;
            padding: 32px;
        }
        #admin_table_wrapper {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        .form_input_text {
            width:calc(100% - 16px);
            border:none;
            border-bottom:1px #333 solid;
            margin-top:30px;
            outline:none;
            padding:8px;
            font-size:13px;
            color:#333;
        }
        #admin_update_submit {
            display:block;
            width:20%;
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#f44336;
            color:#fff;
            font-weight:600;
            font-size:15px;
            border-radius:5px;
            margin-top:10px;
            cursor:pointer;
        }
        #fault_update_form {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        #admin_update_submit:hover {
            filter:brightness(110%);
        }
        #admin_table_list {
            width:100%;
            table-layout:fixed
        }
        #admin_table_list td {
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
            text-align: center;
            padding:10px 0;
            background-color:#ccc;
            font-size:12px;
        }
        .admin_state_radio > span {
            font-size:13px;
            float:right;
            margin:0 15px 0 5px;
        }
        .admin_state_radio > input {
            width:15px;
            height:15px;
            margin:0;
        }
        .fault_selector {
            width:100%;
            height:30px;
            margin-top:30px;
            outline:none;
        }
        #fault_update_submit {
            width:20%;
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#f44336;
            color:#fff;
            font-weight:600;
            border-radius:5px;
            margin-top:30px;
            cursor:pointer;
        }
        #fault_update_submit:hover {
            filter: brightness(110%);
        }
        .fault_state {
            float:left;
            height:15px;
            line-height:15px;
            font-size:12px;
            margin-top: 30px;
        }
        .fault_state > input[type=radio] {
            float:left;
            width:15px;
            height:15px;
        }
        .fault_state > p {
            float:left;
            margin: 0 15px 0 5px;
        }
    </style>
</head>
<body>
    <div id="fault_wrapper">
        <div class="wrapper_head">
            <h2>故障管理</h2>
        </div>
        <form id="fault_update_form" method="post" target="rfFrame">
            <h3>故障修改: </h3>
                <input type="hidden" id="fault_id" name="fault_id" value="-1" />
                <select name="fault_type" id="fault_type" class="fault_selector">
                    <option>请选择家电类型...</option>
                </select>
                <input type="text" name="fault_type_input" id="fault_type_input" class="form_input_text" maxlength="20" placeholder="请输入家电类型..." autocomplete="off" />
                <select name="fault_info" id="fault_info" class="fault_selector">
                    <option>请选择故障信息...</option>
                </select>
                <input type="text" name="fault_info_input" id="fault_info_input" class="form_input_text" maxlength="50" placeholder="请输入故障信息..." autocomplete="off" />
                <div class="fault_state">
                    <input type="radio" name="fault_state_checkbox" value="0" /><p>可用</p>
                </div>
                <div class="fault_state">
                    <input type="radio" name="fault_state_checkbox" value="1" /><p>冻结</p>
                </div>

                <input type="submit" id="fault_update_submit" name="submit" value="修改" />
            <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
            <div style="clear:both"></div>
            </form>
        <div style="clear:both"></div>
    </div>
</body>
<script>
    getFaultType();
    function getFaultType() {
        $.ajax({
            url: "${request.contextPath}/getFaultType",
            type: "get",
            dataType: "text",
            success: function(data) {
                if(data != "") {
                    var json = JSON.parse(data);
                    $("#fault_type").html("<option>请选择家电类型...</option>");
                    for(var j in json) {
                        $("<option>"+json[j]+"</option>").appendTo($("#fault_type"));
                    }
                }
            },
            error: function(data) {

            }
        })
    }
    $("#fault_type").change(function (){
        var type = this.options[this.selectedIndex].innerHTML;
        if(type != "请选择家电类型...") {
            $("#fault_type_input").val(type);
            $.ajax({
                url: "${request.contextPath}/getFaultByType",
                type: "post",
                data: {type: type},
                dataType: "text",
                success: function(data) {
                    if(data != "") {
                        var json = JSON.parse(data);
                        $("#fault_info").html("<option>请选择故障信息...</option>");
                        for(var j in json) {
                            $("<option value='"+json[j].id+"---"+json[j].deletedfailt+"'>"+json[j].faultinfo+"</option>").appendTo($("#fault_info"));
                        }
                    }
                },
                error: function(data, type, err) {
                    alert(type+"---"+err);
                    return false;
                }
            })
        }else {
            $("#fault_info").html("<option>请选择故障信息...</option>");
            $("#fault_info_input").val("");
        }
    })
    $("#fault_info").change(function() {
        var id = this.options[this.selectedIndex].value.split("---")[0];
        var info = this.options[this.selectedIndex].innerHTML;
        if(info != "" && id != null) {
            $("#fault_id").val(id);
            $("#fault_info_input").val(info);
            var state = this.options[this.selectedIndex].value.split("---")[1];
            if(state == 0) {
                $(".fault_state:first").children("input").prop("checked", true);
                $(".fault_state:last").children("input").prop("checked", false);
            }else {
                $(".fault_state:last").children("input").prop("checked", true);
                $(".fault_state:first").children("input").prop("checked", false);
            }
        }
    })
    $("#fault_update_form").submit(function() {
        var id = $("#fault_id").val();
        if(id < 0) {
            alert("请先选择要修改的故障!");
            return false;
        }
        var type = $("#fault_type_input").val();
        if(type.trim() == "") {
            alert("家电类型不能为空!");
            return false;
        }
        var info = $("#fault_info_input").val();
        if(info.trim() == "") {
            alert("故障信息不能为空!");
            return false;
        }
        if(id > 0 && type.trim() != "" && info.trim() != "") {
            $.ajax({
                url: "${request.contextPath}/updateFault",
                type: "post",
                data: $(this).serialize(),
                dataType: "text",
                success: function(data) {
                    if(data == "success") {
                        alert("修改成功!");
                        $("#fault_type_input").val("");
                        $("#fault_info_input").val("");
                        $("#fault_id").val(-1);
                        $("#fault_type").find("option").eq(0).prop("selected", true);
                        $("#fault_info").find("option").eq(0).prop("selected", true);
                    }
                },
                error: function(data) {
                    alert(data);
                }
            })
        }
    })
</script>
</html>